<!DOCTYPE html>
<!-- saved from url=(0051)http://192.168.40.10:8088/searchPage.html?keyword=f -->
<html><head lang="en"><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>找攻略</title>
    
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="/js/bootstrap-4.1.1-dist/css/bootstrap.min.css">
    <script src="/js/jquery/jquery.min.js"></script>
    <script src="/js/bootstrap-4.1.1-dist/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="/css/font/css/font-awesome.min.css"/>
    <link rel="stylesheet" href="/css/reset.css"/>
    <link rel="stylesheet" href="/css/strategyCatalogs.css"/>
    <script src="/js/plugins/jrender/jrender.min.js"></script>
    <link rel="stylesheet" href="/js/plugins/dialog2/dialog.css"/>
    <script src="/js/plugins/dialog2/dialog.min.js"></script>
    <script src="/js/common.js"></script>

</head>

<body>
<div class="search-head">
    <div class="row nav-search">
        <div class="col-2">
            <a href="javascript:void(window.history.length &gt; 1 ? window.history.back() : document.location.href=&#39;index.html&#39;)">
                <span><i class="fa fa-chevron-left fa-2x"></i></span>
            </a>
        </div>
        <div class="col-10">
            <div class="col-11 keyword" style="overflow: hidden;white-space: nowrap;text-overflow: ellipsis;
            text-align:left;font-size: 20px;position: absolute;top: 15%;color:white;"></div>
        </div>
    </div>
</div>

<ul class="nav nav-pills nav-justified border border-left-0 border-top-0 border-right-0" id="pills-tab" role="tablist">
    <li class="nav-item" style="width: 25%">
        <a id="strategy" class="nav-link active show" data-toggle="pill" href="#pills-strategys" data-type="strategys">
            <span class="strategy">地区攻略<span></span></span>
        </a>
    </li>
    <li class="nav-item" style="width: 25%">
        <a id="travel" class="nav-link clickTab" data-toggle="pill" href="#pills-travels" data-type="travels">
            <span class="travel">游记攻略<span></span></span>
        </a>
    </li>
    <li class="nav-item" style="width: 25%">
        <a id="article" class="nav-link clickTab" data-toggle="pill" href="#pills-articles" data-type="articles">
            <span class="article">日报<span></span></span>
        </a>
    </li>
    <li class="nav-item" style="width: 25%">
        <a id="user" class="nav-link clickTab" data-toggle="pill" href="#pills-users" data-type="users">
            <span class="user">用户<span></span></span>
        </a>
    </li>

</ul>

<div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="pills-strategys"></div>
    <div role="tabpanel" class="tab-pane" id="pills-travels"></div>
    <div role="tabpanel" class="tab-pane" id="pills-articles"></div>
    <div role="tabpanel" class="tab-pane" id="pills-users"></div>
</div>
<script>
    var keyword = decodeURI(getParams().keyword);
    var type = "strategys";
    var currentPage = 2;
    var pages = 2;
    var store = [];
    function queryHtml(arg) {
         $.get("/contents",{"type":type,"currentPage":1,"pageSize":8,"keyword":keyword},function (data) {
             $("#pills-"+type).html(data);
         },"html");
    }
    queryHtml(keyword);
    $(".keyword").html("您搜索的内容:"+keyword);

    //分页
    function queryJson(arg) {
        $.get("/contents",{"type":type,"currentPage":currentPage,"pageSize":8,"keyword":keyword},function (data) {
            $.merge(store,data.list);
            var temp = "";
            $.each(store,function (index,ele){
                temp += '<div class="col-12 mb">\n' +
                    '                <a href="/strategyCatalogs.html?id="'+ele.id+'>\n' +
                    '                    <img class="float-left" src="'+ele.coverUrl+'" width="100px">\n' +
                    '                    <div class="classify-text">\n' +
                    '                        <span>'+ele.title+'</span>\n' +
                    '                    </div>\n' +
                    '                </a>\n' +
                    '            </div>'
            });
            $(".classify").append(temp);
                currentPage ++;
                pages = data.pages;
        },"json");
    }

    $(".nav-link").click(function () {
        $("#pills-top").html("");
        store = [];
        currentPage = 2;
        type = $(this).data("type");
        queryHtml(keyword);
    });

    $(window).scroll(function () {
        //页面滑动查询
        if (($(window).height() + $(document).scrollTop()) >= $(document).height()) {
            if (currentPage <= pages) {
                queryJson(keyword);
            } else {
                $(document).dialog({
                    type: 'notice',
                    infoText: '已经到底了',
                    autoClose: 1500,
                    position: 'bottom'  // center: 居中; bottom: 底部
                });
            }

        }
    });

</script>
</body></html>
